<script setup lang="ts">
import { computed, useTemplateRef } from 'vue';
import { useBattle, useScene } from '../../../../composables';
import { EVENTS, GameKernel } from '../../../../game';
import ExperienceSettingModal from './setting.vue';

const emit = defineEmits<{
  (e: 'into'): void;
}>();

const { state: sceneState } = useScene();
const { state: battleState } = useBattle();

const experienceSettingModalRef = useTemplateRef('experienceSettingModalRef');

const isExploring = computed(() => {
  return sceneState.value.isExploring;
});

const isBattling = computed(() => {
  return battleState.value.isBattling;
});

function disabledIntoButton(id: string) {
  return (
    (isExploring.value || isBattling.value) &&
    sceneState.value.currentScene?.id !== id
  );
}

function onIntoClick(id: string) {
  GameKernel.inst.bus.emit(EVENTS.SCENE_CHANGE, id);
  emit('into');
}

function onSettingClick() {
  experienceSettingModalRef.value?.show();
}
</script>

<template>
  <div class="flex flex-col h-full">
    <div class="flex-none p-2 flex justify-end">
      <a-button size="small" @click="onSettingClick">历练设置</a-button>
    </div>
    <div
      class="scene-list bg-container-background overflow-auto p-2 pt-0 flex-1 flex flex-col gap-2"
    >
      <a-card v-for="item in sceneState.scenes" :key="item.id">
        <div class="flex items-center">
          <div class="flex-1 flex flex-col gap-1">
            <div class="font-bold text-base">{{ item.name }}</div>
            <div class="text-gray-400">{{ item.description }}</div>
            <div class="text-xs">
              推荐实力：{{ item.recommendedRealm }} ({{ item.recommendedLevel }}
              级)
            </div>
            <div v-if="item?.config?.author" class="text-xs">
              秘境之主：{{ item.config.author.name }}
            </div>
          </div>
          <div class="flex-none">
            <a-button
              :disabled="disabledIntoButton(item.id)"
              @click="onIntoClick(item.id)"
            >
              进入
            </a-button>
          </div>
        </div>
      </a-card>
    </div>
    <experience-setting-modal
      ref="experienceSettingModalRef"
    ></experience-setting-modal>
  </div>
</template>

<style scoped>
.scene-list :deep(.ant-card-body) {
  padding: 16px;
}
</style>
